<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags/html" prefix="html"%>
<%@ page session="false"%>

<div class="page-header">
  <h2>${coder.name} ${coder.surname}</h2>
</div>

<table class="table table-hover">
  <thead>
    <tr>
      <th colspan="2">Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>E-Mail</th>
      <td>${coder.email}</td>
    </tr>
    <tr>
      <th>Birthdate</th>
      <td>${coder.birthdate}</td>
    </tr>
    <c:if test="${isAuthenticatedUser}">
      <tr>
        <td colspan="2"><a
          href="<c:url value='/coder/${coder.id}/edit' />"
          title="Edit profile"> Edit profile</a></td>
      </tr>
    </c:if>
  </tbody>
</table>

<ul class="nav nav-tabs" id="coderTab">
  <li class="active"><a href="#articles">Articles</a></li>
  <li><a href="#follower">Follower</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="articles">
    <c:forEach items="${coder.articles}" var="article">
      <html:article articleId="${article.id}"
        created="${article.created}" title="${article.title}"
        authorId="${article.author.id}"
        authorName="${article.author.name}">${article.body}
        </html:article>
      <div id="js-comments-${article.id}" style="display: none">
        <c:forEach items="${article.comments}" var="comment">
          <html:comment authorName="${comment.author.name}"
            authorId="${comment.author.id}" created="${comment.created}">${comment.body}</html:comment>
        </c:forEach>
      </div>
      <div class="article-spacer"></div>
    </c:forEach>
  </div>

  <div class="tab-pane" id="follower">
    <ul class="thumbnails">
      <c:forEach items="${coder.follower}" var="follower">
        <li class="span4">
          <div class="thumbnail">
            <div class="media">
              <a class="pull-left" href="#"> <img
                class="media-object"
                src="<c:url value='/resources/codebook/img/placeholder.gif' />">
              </a>
              <div class="media-body">
                <h4 class="media-heading">
                  <a href="<c:url value='/coder/${follower.id}' />"
                    title="Visit profile"> ${follower.name}
                    ${follower.surname} </a>
                </h4>
                <p>
                  <b>E-Mail:</b> ${follower.email}<br> <b>Birthdate:</b>
                  ${follower.birthdate}
                </p>
              </div>
            </div>
          </div>
        </li>
      </c:forEach>
    </ul>
  </div>
</div>


<script type="text/javascript">
	$(document).ready(function($) {

		$('#coderTab a').click(function(e) {
			e.preventDefault();
			$(this).tab('show');
			top.location.hash = $(this).attr('href');
		});

		$(window).bind('hashchange', function() {
			if (!top.location.hash) {
				$('#coderTab a[href="articles"]').tab('show');
				return;
			}
			$('#coderTab a[href="' + top.location.hash + '"]').click();
		});

		$('#coderTab a[href="' + top.location.hash + '"]').click();
	});
</script>
